<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>张伟峰-翻页</title>
    <link rel="stylesheet" type="text/css" href="../css/base.css" >
    <style>
        html,body{  height:100%;  overflow: hidden;  }
        body{ background: -webkit-linear-gradient(#339999,#9c9c9c); }
        .box{ width:700px;  height:400px; background: url("img/00.jpg") no-repeat; margin: 50px auto;  position: relative; }
        .page{ width:50%;  height: 100%;  position: absolute;  right: 0; top:0;  transform-origin: left center; transform-style: preserve-3d; z-index: 3;  transition: 1s all ease;  transform:perspective(800px) rotateY(0deg);  }
        .page div{  width:100%; height:100%;  position: absolute;  left: 0;  top:0; }
        .front{ background: url("img/00.jpg") no-repeat right top; z-index: 2; backface-visibility: hidden; }
        .back{ background: url("img/01.jpg") no-repeat; z-index: 1; transform: scale(-1,1); }
        .page2{ width:50%; height:100%; position: absolute;  right: 0; top:0; background: url("img/01.jpg") no-repeat right top; z-index: 2;  }
    </style>
    <script>
        window.onload=function(){
            var oBox=document.querySelector('.box');
            var oPage=document.querySelector('.page');
            var oPage2=document.querySelector('.page2');
            var oFront=document.querySelector('.front');
            var oBack=document.querySelector('.back');

            var iNow=0;
            var bReady=true;
            oBox.onclick=function(){
                if(bReady==false)return;
                bReady=false;

                iNow++;

                oPage.style.transition='1s all ease';
                oPage.style.transform='perspective(800px) rotateY(-180deg)';

                function tEnd(){
                    //瞬间
                    oPage.style.transition='none';
                    oPage.style.transform='perspective(800px) rotateY(0deg)';

                    //换图
                    oBox.style.backgroundImage='url(img/0'+iNow%3+'.jpg)';
                    oFront.style.backgroundImage='url(img/0'+iNow%3+'.jpg)';

                    oBack.style.backgroundImage='url(img/0'+(iNow+1)%3+'.jpg)';
                    oPage2.style.backgroundImage='url(img/0'+(iNow+1)%3+'.jpg)';
                    bReady=true;
                    oPage.removeEventListener('transitionend',tEnd,false);
                }
                oPage.addEventListener('transitionend',tEnd,false);
            };
        };
    </script>
</head>
<body>
    <div class="box">
        <div class="page">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="page2"></div>
    </div>
</body>
</html>














